<template>
  <view>
    <transition name="fade" v-if="mask">
      <view class="mask" v-show="_show" @click="close"> </view>
    </transition>

    <view class="drawer" :class="_show ? 'drawer-show' : 'drawer-hide'">
      <slot></slot>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';

  const props = defineProps({
    show: {
      type: Boolean,
      default: false,
    },
    mask: {
      type: Boolean,
      default: true,
    },
    height: {
      type: String,
      default: '60',
    },
  });

  const _show = ref<boolean>(props.show);
  const winHeight = ref<string>(props.height + '%');
  const winBottom = ref<string>('-' + props.height + '%');

  const emits = defineEmits(['update:show']);
  const close = () => {
    _show.value = false;
    emits('update:show', false);
  };

  watch(
    () => props.show,
    (val) => {
      _show.value = props.show;
    }
  );
</script>

<style lang="scss" scoped>
  .mask {
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.6;
  }

  .fade-enter-from {
    opacity: 0;
  }

  .fade-enter-to {
    opacity: 0.6;
  }

  .fade-leave-from {
    opacity: 0.6;
  }

  .fade-leave-to {
    opacity: 0;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.4s;
  }

  .drawer {
    z-index: 20;
    position: fixed;
    left: 0;
    background: white;
    height: v-bind(winHeight);
    width: 100%;
    // padding: 30rpx 50rpx;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    overflow: hidden;
    transition: all ease-in-out 0.3s;
  }

  .drawer.drawer-show {
    bottom: 0%;
  }

  .drawer.drawer-hide {
    bottom: v-bind(winBottom);
  }
</style>
